{% assign current_variant = product.selected_or_first_available_variant %}
<div class="sticky-top-section mt-5 mt-lg-0 px-md-0 px-3">
  <variant-lists data-url="{{ product.url }}" data-section="{{ section.id }}" class="d-none">
    <label for="product-{{ product.id }}-variant" class="form-label visually-hidden">Variant</label>
    <select id="product-{{ product.id }}-variant" class="as-product-variant" name="id">
      {%- for variant in product.variants -%}
        <option class="as-product-variant-option" value="{{ variant.id }}"
        {% if variant.option1 %}data-option1="{{ variant.option1 }}" {% endif %}
        {% if variant.option2 %}data-option2="{{ variant.option2 }}" {% endif %}
        {% if variant.option3 %}data-option3="{{ variant.option3 }}" {% endif %}
          {%- if variant == current_variant %} selected="selected" {%- endif -%}>
          {{ variant.title }}
        </option>
      {%- endfor -%}
    </select>
  </variant-lists>
  {%- assign product_form_id = 'as-product-form-' | append: section.id -%}
  <div class="purchase-main">
  {%- for block in section.blocks -%}
    {%- case block.type -%}
      {%- when 'text' -%}
        {%- liquid
          case block.settings.text_type
            when 'uppercase'
              assign text_type = 'text-uppercase text-accent'
            when 'footnote'
              assign text_type = 'small text-muted'
            else
              assign text_type = ''
          endcase
        -%}
        <div class="text-icon-wrapper d-flex align-items-center {{ text_type }} {{ block.settings.margin_bottom }}">
          {% if block.settings.advert_icon != blank %}
            <img class="advert-icon float-start me-2" style="height: 2em;"
              src="{{ block.settings.advert_icon | img_url: 'master' }}" alt="{{ block.settings.advert_icon.alt }}">
          {% endif %}
          <p class="mb-0 fs-7" style="color:{{ block.settings.text_color }}">{{ block.settings.text }}</p>
        </div>
      {% when '@app' %}
        {% render block %}
      {%- when 'title' -%}
        <h1 class="product-title">{{ product.title }}{% render 'okendo-reviews-product-rating-summary', product: product %}</h1>
      {%- when 'paypal' -%}
        <script src="https://www.paypal.com/sdk/js?client-id=Aev9bvYSpQEQjQGk-M9DT_-grE8RTor7mN162-9QwJScmHHLkAdKNyaePUkE5lXs_b6ccgzGvDXlutDl&components=messages&currency=USD"></script>
        <div class="as-paypal-installment">
          <div data-pp-buyerCountry="US" data-pp-message data-pp-placement="product" data-pp-amount="{{ product.selected_or_first_available_variant.price | divided_by:100 }}"></div>
        </div>
      {%- when 'price' -%}
        <div class="product-price" id="price-{{ section.id }}">
          {% render 'price', product: product, use_variant: true, show_badges: false, price_class: 'product-price' %}
        </div>
      {%- when 'line' -%}

          <div class="{{block.settings.top_space}} {{block.settings.bottom_space}}">
            <div class="bg-gray-300" style="height: 1px;"></div>
          </div>
      {%- when 'variant_picker' -%}
        <div class="variant_picker">
        {%- unless product.has_only_default_variant -%}
          <variant-options data-levels="{{ product.options_with_values.size }}" data-section="{{ section.id }}" data-url="{{ product.url }}">
            {%- for option in product.options_with_values -%}
              {%- liquid
                assign show_color_swatch = false
                if block.settings.enable_color_swatches
                  assign option_name = option.name | downcase
                  if option_name == 'color' or option.name == block.settings.swatch_option_name
                    assign show_color_swatch = true
                  endif
                endif
              -%}
              {% if show_color_swatch %}
                {% assign browser_support_color = ',AliceBlue,AntiqueWhite,Aqua,Aquamarine,Azure,Beige,Bisque,Black,BlanchedAlmond,Blue,BlueViolet,Brown,BurlyWood,CadetBlue,Chartreuse,Chocolate,Coral,CornflowerBlue,Cornsilk,Crimson,Cyan,DarkBlue,DarkCyan,DarkGoldenRod,DarkGray,DarkGreen,DarkKhaki,DarkMagenta,DarkOliveGreen,Darkorange,DarkOrchid,DarkRed,DarkSalmon,DarkSeaGreen,DarkSlateBlue,DarkSlateGray,DarkTurquoise,DarkViolet,DeepPink,DeepSkyBlue,DimGray,DodgerBlue,Feldspar,FireBrick,FloralWhite,ForestGreen,Fuchsia,Gainsboro,GhostWhite,Gold,GoldenRod,Gray,Green,GreenYellow,HoneyDew,HotPink,IndianRed,Indigo,Ivory,Khaki,Lavender,LavenderBlush,LawnGreen,LemonChiffon,LightBlue,LightCoral,LightCyan,LightGoldenRodYellow,LightGrey,LightGreen,LightPink,LightSalmon,LightSeaGreen,LightSkyBlue,LightSlateBlue,LightSlateGray,LightSteelBlue,LightYellow,Lime,LimeGreen,Linen,Magenta,Maroon,MediumAquaMarine,MediumBlue,MediumOrchid,MediumPurple,MediumSeaGreen,MediumSlateBlue,MediumSpringGreen,MediumTurquoise,MediumVioletRed,MidnightBlue,MintCream,MistyRose,Moccasin,NavajoWhite,Navy,OldLace,Olive,OliveDrab,Orange,OrangeRed,Orchid,PaleGoldenRod,PaleGreen,PaleTurquoise,PaleVioletRed,PapayaWhip,PeachPuff,Peru,Pink,Plum,PowderBlue,Purple,Red,RosyBrown,RoyalBlue,SaddleBrown,Salmon,SandyBrown,SeaGreen,SeaShell,Sienna,Silver,SkyBlue,SlateBlue,SlateGray,Snow,SpringGreen,SteelBlue,Tan,Teal,Thistle,Tomato,Turquoise,Violet,VioletRed,Wheat,White,WhiteSmoke,Yellow,YellowGreen,' | downcase %}

                  <fieldset class="as-option-wrap mb-5 as-color-swatch">
                    <legend class="option-title">{{ option.name }}: <span class="as-color-option-name">{{ option.selected_value }}</span></legend>
                    <div class="d-flex flex-wrap m-n2 as-color-swatch-input">
                      {%- for value in option.values -%}
                        {%- capture is_not_exist -%} 
                          {%- render 'filter-options', product: product, option: option, value: value, current_variant: current_variant -%}
                        {%- endcapture -%}
                        {% assign is_not_exist = is_not_exist | strip %}
                        <div class="my-1 mx-2 color-swatch-btn">
                          <input data-position="{{ option.position }}" type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                            class="as-step-option color-swatch-btn-input"
                            name="{{ option.name }}"
                            value="{{ value | escape }}"
                            form="as-product-form-{{ section.id }}"
                            {% if option.selected_value == value %}checked{% endif %}
                            {% if is_not_exist == 'true' %}disabled{% endif %}
                          >
                          <label class="color-swatch-btn-label" for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                            {%- liquid
                              assign search_terms = value | downcase | prepend: ',' | append: ','
                            -%}
                            {%- if block.settings.color_swatches_rule_configuration contains value -%}
                              {%- liquid
                                assign files_support_color = block.settings.color_swatches_rule_configuration | split: ";"
                                for rule in files_support_color
                                  assign rule_item = rule | split: ':'
                                  if rule_item.first == value
                                    assign rule_value = rule_item.last
                                    break
                                  endif
                                endfor
                                if rule_value contains '#'
                                  assign option_color = rule_value
                                elsif rule_value contains '.'
                                  assign option_img = images[rule_value]
                                endif
                              -%}

                              {%- if option_img != blank -%}
                                <img width="auto" height="auto" loading="lazy" src="{{ option_img | img_url: '24x24' }}" class="h-100 w-100 object-fit-cover rounded" alt="{{ value }}">
                              {%- elsif option_color != blank -%}
                                <span style="background-color: {{ option_color }}"></span>
                              {%- endif -%}
                            {%- elsif browser_support_color contains search_terms -%}
                              <span style="background-color: {{ value | downcase }}"></span>
                            {%- else -%}
                              <span class="bg-white"></span>
                            {%- endif -%}
                          </label>
                        </div>
                      {%- endfor -%}
                    </div>
                  </fieldset>
              {% endif %}

              {%- if block.settings.type == 'button' and show_color_swatch != true -%}
                <fieldset class="as-option-wrap">
                  <legend class="mb-2 option-title">{{ option.name }}</legend>
                  <div class="d-grid gap-2">
                    {%- for value in option.values -%}
                      {%- capture is_not_exist -%}
                        {%- render 'filter-options', product: product, option: option, value: value, current_variant: current_variant -%}
                      {%- endcapture -%}
                      {% assign is_not_exist = is_not_exist | strip %}
                      <div class="radio-btn">
                        <input data-position="{{ option.position }}" type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                          class="as-step-option radio-btn-input"
                          name="{{ option.name }}"
                          value="{{ value | escape }}"
                          form="as-product-form-{{ section.id }}"
                          {% if option.selected_value == value %}checked{% endif %}
                          {% if is_not_exist == 'true' %}disabled{% endif %}
                        >
                        <label class="radio-btn-label w-100 option-btn justify-content-between" for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                          {%- liquid
                            assign option_marker_values = ""
                            assign option_marker_colors = ""

                            if block.settings.options_marker contains value
                              assign option_markers = block.settings.options_marker | split: ";"
                              for option_marker in option_markers
                                assign option_marker_item = option_marker | split: ':'
                                if option_marker_item[0] == value
                                  assign option_marker_value = option_marker_item[1]
                                  assign option_marker_color = option_marker_item[2]
                                  assign option_marker_values = option_marker_values | append: option_marker_value | append: ','
                                  assign option_marker_colors = option_marker_colors | append: option_marker_color | append: ','
                                endif
                              endfor
                            endif
                          -%}

                          {% assign option_marker_values = option_marker_values | split: ',' | uniq %}
                          {% assign option_marker_colors = option_marker_colors | split: ',' | uniq %}

                          <span class="">{{ value }}</span>
                          {% if option_marker_values.size > 0 %}
                            <span class="ms-2 me-n2 as-mark-values text-end">
                              {% for option_marker_value in option_marker_values %}
                                {% assign i = forloop.index0 %}
                                {% if option_marker_value != blank %}
                                  <span class="as-value d-inline-block variant-marker bg-primary text-white rounded-pill fs-footnote px-2 text-center fw-normal" style="background-color: {{ option_marker_colors[i] }} !important;">{{ option_marker_value }}</span>
                                {% endif %}
                              {% endfor %}
                            </span>
                          {% endif %}
                        </label>
                      </div>
                    {%- endfor -%}
                  </div>
                </fieldset>
              {%- elsif block.settings.type == 'dropdown' and show_color_swatch != true -%}
                <div class="mb-5">
                  <label class="fw-bold mb-2" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                    {{ option.name }}
                  </label>
                  <div class="as-option-wrap">
                    <div class="select-btn-wrap">
                      <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
                        class="select-btn"
                        name="options[{{ option.name | escape }}]"
                        form="as-product-form-{{ section.id }}"
                      >
                        {%- for value in option.values -%}
                        {%- capture is_not_exist -%}
                          {%- render 'filter-options', product: product, option: option, value: value, current_variant: current_variant -%}
                        {%- endcapture -%}
                        {% assign is_not_exist = is_not_exist | strip %}
                          <option data-position="{{ option.position }}" class="as-step-option" value="{{ value | escape }}" {% if is_not_exist == 'true' %}disabled{% endif %} {% if option.selected_value == value %}selected="selected"{% endif %}>
                            {{ value }}
                          </option>
                        {%- endfor -%}
                      </select>
                    </div>
                  </div>
                </div>
              {%- endif -%}
            {%- endfor -%}
            <script class="as-variants-data" type="application/json">
              {{ product.variants | json }}
            </script>
          </variant-options>
        {% else %}
          <script class="as-variants-data" type="application/json">
            {{ product.variants | json }}
          </script>
        {%- endunless -%}
        </div>
      {%- when 'quantity_selector' -%}
        <div class="mb-5">
          <p class="mb-2 small quantity-label">{{ 'products.product.quantity.label' | t }}</p>
          <div class="d-inline-block">
            <quantity-input>
              <div class="input-group flex-nowrap quantity">
                <button class="quantity-btn as-quantity-btn" type="button" name="minus" disabled="true">
                  <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
                  {%- render 'icon-minus' -%}
                </button>
                <input type="number" readonly disabled
                  id="quantity-input"
                  name="quantity"

                  class="fw-bold as-form-control-number form-control-number form-control text-center bg-transparent"
                  step="1" min="1" value="1">
                <button class="quantity-btn as-quantity-btn" type="button" name="plus" {%- unless product.selected_or_first_available_variant.available -%}disabled="true"{%- endunless -%}>
                  <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
                  {%- render 'icon-plus' -%}
                </button>
              </div>
            </quantity-input>
          </div>
        </div>

      {%- when 'recommendations' -%}
      {%- assign current_variant = product.selected_or_first_available_variant -%}
      <shop-with-us>
        {%- comment -%}<!-- 随手购 -->{%- endcomment -%}
        <div data-recommendations="" class="as-shop-with-us-wrap shop-with-us-wrap">
          {%- comment -%}<!-- 配件 -->{%- endcomment -%}
          <div class="as-recommendations{% if current_variant.available == false %} d-none{% endif %}">
            {% if block.settings.heading != blank %}
              <h5 class="fw-bolder {% if block.settings.accessories_text != blank %}mb-1{% else %}mb-3{% endif %}">{{ block.settings.heading }}</h5>
            {% endif %}
            {% if block.settings.accessories_text != blank %}
              <div class="no-last-margin mb-3">{{ block.settings.accessories_text }}</div>
            {% endif %}
            <div class="row row-cols-1 mt-n3 mt-lg-n2">
              {% assign num = 0 %}
              {% for accessory_product in block.settings.accessories %}
              {% liquid
                if accessory_product.available == false
                  assign num = num | plus: 1
                endif
                assign index = forloop.index | minus: num
                %}
                {% if accessory_product.available %}
                  {% assign available_variant = accessory_product.selected_or_first_available_variant %}
                  {%- comment -%}<!-- 配件信息 -->{%- endcomment -%}
                  <div data-index="{{index}}" class="col mt-3 mt-lg-2{% if index > 3 %} d-none as-recommendations-col{% endif %}">
                    <div class="position-relative border rounded-2 recommendations-card overflow-hidden">
                      <div class="d-flex align-items-start align-items-lg-center p-3 p-lg-4">
                        <div class="position-relative">
                          <div class="recommendations-img-wrap">
                            <img srcset="{{ accessory_product.featured_image | img_url: 'master' }}"
                              src="{{ accessory_product.featured_image | img_url: 'master' }}"
                              alt="{{ accessory_product.featured_image.alt | escape }}"
                              loading="lazy"
                              class="w-100 h-100 object-fit-cover"
                              width="{{ accessory_product.featured_image.width }}"
                              height="{{ accessory_product.featured_image.height }}">
                          </div>
                          {% if block.settings.whether_click_image_link_to_purchase_page %}
                            <a class="stretched-link recommendations-link" target="_blank" {% if accessory_product.url contains 'https://' %} rel="nofollow" {% endif %} href="{{ accessory_product.url }}"></a>
                          {% endif %}
                        </div>
                        <div class="d-flex flex-grow-1 justify-content-lg-between">
                          <div class="ms-lg-4 ms-3">
                            <div class="position-relative{% if accessory_product.available == false %} gray-400{% endif %}">
                              <div class="accessroy-title ellipsis-2">{{ accessory_product.title }}</div>
                              {% if block.settings.whether_click_image_link_to_purchase_page %}
                                <a class="stretched-link recommendations-link" target="_blank" {% if accessory_product.url contains 'https://' %} rel="nofollow" {% endif %} href="{{ accessory_product.url }}"></a>
                              {% endif %}
                            </div>
                            <div class="d-lg-none mt-2{% if accessory_product.available == false %} gray-400{% endif %}">
                              {% render 'price', product: accessory_product, use_variant: true, show_badges: false, price_class: 'product-price', flex_parameters: 'align-items-center', price_compare_font: 'small' %}
                            </div>
                          </div>
                          <div class="ms-lg-5 d-none d-lg-block{% if accessory_product.available == false %} gray-400{% endif %}">
                            {% render 'price', product: accessory_product, use_variant: true, show_badges: false, price_class: 'product-price', flex_parameters: 'flex-lg-column justify-content-lg-end text-lg-end', price_compare_font: 'small' %}
                          </div>
                        </div>
                      </div>
                      <div>
                        <div class="selected-icon"></div>
                        <span class="position-absolute" style="bottom: 0.25rem; right: 0.25rem;">
                          {% render 'icon-hook' %}
                        </span>
                      </div>
                      <button type="button" {% unless accessory_product.available %}disabled{% endunless %} class="as-recommendations-btn w-100 p-0 border-0 absolute-center bg-transparent" data-price="{{ available_variant.price }}" {% if available_variant.compare_at_price > available_variant.price %}data-compared="{{ available_variant.compare_at_price }}"{% endif %} data-id="{{ available_variant.id }}" data-index="{{ index }}"></button>
                    </div>
                  </div>
                {% endif %}
              {% endfor %}
            </div>
            {% if block.settings.enable_show_more %}
              {% if index > 3 %}
                <div class="as-toggle-recommendations-btn cursor-pointer mt-3">
                  <div class="as-show-more">
                    <span>
                      {{ 'products.product.show_more' | t }}
                    </span>
                    <span class="ms-2">
                      {% render 'icon-plus-circle' %}
                    </span>
                  </div>
                  <div class="d-none as-show-less">
                    <span>
                      {{ 'products.product.show_less' | t }}
                    </span>
                    <span class="ms-2">
                      {% render 'icon-minus-circle' %}
                    </span>
                  </div>

                </div>
              {% endif %}
            {% endif %}
          </div>
          {%- comment -%}<!-- 吸底条 -->{%- endcomment -%}
          <div class="add-to-cart-wrap as-add-to-cart-wrap bg-white py-3">
            <div class="container">
              <div class="d-flex flex-wrap justify-content-lg-between align-items-center">
                <div class="col-12 col-lg-auto">
                  <div class="d-flex flex-wrap align-items-center">
                    <div class="cober_image_title">
                      <div class="product-image">
                        <img src="{{ product.featured_image |  image_url: width: '72x' }}"/>
                      </div>                      
                    </div>
                  <div class="d-block">
                  
                    <h3 class="prod_title">{{ product.title }}<span class="accessory-count"></span></h3>
                    <div class="d-flex flex-wrap align-items-baseline">
                      <span class="col-auto as-product-price h3 fw-bolder mb-0" style="font-size: 20px;">{{ current_variant.price | money }}</span>
                      <s class="col-auto text-capitalize as-product-compare-at-price ms-2 d-none" style="font-size:20px;">{{ current_variant.compare_at_price | money }}</s>
                      <div class="col-12 col-lg-auto mt-1 mt-lg-0">
                        <span class="ms-lg-2 text-danger as-sale-out-text{% if product.selected_or_first_available_variant.available %} d-none{% endif %}">Out of stock</span>
                      </div>
                    </div>
                  </div>
                  </div>
                  {% if product.metafields.custom.shipping_info.value != blank %}
                  <div class="pt-1" style="font-size:.875rem;color:#8C8C8C;">{{ product.metafields.custom.shipping_info.value }}</div>
                  {% endif %}
                  {% comment %} 加购失败提示 {% endcomment %}
                  {% render 'add-error-message' %}
                </div>
                {% comment %} 按钮 {% endcomment %}
                <div class="as-normal-checkout-wrap mt-2 mt-lg-0 col-12 col-lg-auto">
                  <product-form class="product-form">
                    {% liquid
                      assign productFormClass = 'form'
                      if settings.add_to_cart_action == 'show_added_msg' and settings.cart_type != 'page' and settings.show_cart
                        assign productFormClass = productFormClass | append: ' as-async-add-form'
                      endif
                      %}
                    {%- form 'product', product, id: product_form_id, class: productFormClass, novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                    {% if settings.cart_type == 'page' %}
                      <div class="as-go-cart-page">
                        <input class="as-form-quantity" type="hidden" name="items[0]id" value="{{ product.selected_or_first_available_variant.id }}">
                        <input type="hidden" name="items[0]quantity" value="1">
                      </div>
                    {% else %}
                      <input class="as-form-quantity" type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                      <input type="hidden" name="quantity" value="1">
                      <div class="as-go-cart-add-accessorise"></div>
                    {% endif %}
                      {% assign isBuyOnAmazon = current_variant.metafields.custom.buy_on_amazon %}
                      {% assign buy_button_block = section.blocks | where: 'type', 'buy_button' | map: 'settings' %}
                      {% for item in section.blocks %}
                        {% if item.type == 'buy_button' %}
                          {% assign buy_button_block = item %}
                        {% endif %}
                      {% endfor %}

                      {% assign hideAddToCart = false %}
                      {% assign buyNowClass = "" %}
                      {% if hiddenAddToCart %}
                        {% assign hideAddToCart = true %}
                        {% assign buyNowClass = "w-100" %}
                      {% endif %}

                      {% if showNotifyMe == false %}
                        <div class="d-flex as-form-button-wrap flex-wrap mx-n1">
                          {% unless hideAddToCart %}
                            <div class="col-6 col-lg-auto flex-grow-1 px-1">
                              <button name="add" type="submit" class="position-relative text-nowrap fw-bold btn btn-outline-primary  px-lg-6 w-100" {% unless product.selected_or_first_available_variant.available -%}disabled="true"{% endunless %}>
                                {% if product.selected_or_first_available_variant.available %}
                                  <span class="as-loading-icon me-2 position-absolute start-50 translate-middle-x d-none loading-icon">
                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                  </span>
                                {% endif %}
                                {%- if product.selected_or_first_available_variant.available -%}
                                  <span class="as-available-info add-to-cart-text">{{ 'products.product.add_to_cart' | t }}</span>
                                  <span class="as-unavailable-info d-none">{{ 'products.product.sold_out' | t }}</span>
                                {% else %}
                                  <span class="as-available-info d-none">{{ 'products.product.add_to_cart' | t }}</span>
                                  <span class="as-unavailable-info">{{ 'products.product.sold_out' | t }}</span>
                                {% endif %}
                              </button>
                            </div>
                          {% endunless %}

                          <div class="as-buy-btn-wrap col-6 col-lg-auto px-1 {{ buyNowClass }}">
                            {% if isBuyOnAmazon %}
                              <div class="additional-checkout-buttons">
                                <a class="fw-bold btn btn-primary  px-lg-6 w-100" target="_blank" rel="noopener nofollow" href="{{ isBuyOnAmazon }}">{{ 'products.product.buy_on_amazon' | t }}</a>
                              </div>
                            {% else %}
                              <div class="additional-checkout-buttons {% unless current_variant.available %} d-none{% endunless %}">
                                <a 
                                  data-cart-url="{{ routes.cart_url }}" class="{% unless current_variant.available %}d-none {% endunless %}{% if settings.enable_solid_primary_button %}kiks-btn-primary {% endif %}as-checkout-btn fw-bold btn btn-primary px-lg-6 w-100"
                                  href="{{ routes.cart_url }}/{{ current_variant.id }}:1">
                                    {% if buy_button_block.settings.button_label != blank %}
                                      {{ buy_button_block.settings.button_label }}
                                    {% else %}
                                      {{ 'products.product.buy_now' | t }}   
                                    {% endif %}
                                </a>
                              </div>
                            {% endif %}
                          </div>
                        </div>
                      {% else %}
                        <div class="d-flex as-form-button-wrap flex-wrap">
                          <div class="col-12 as-button-wrap{% unless current_variant.available %} d-none{% endunless %}">
                            <div class="d-flex mx-n1">
                              {% unless hideAddToCart %}
                                <div class="col-6 col-lg-auto flex-grow-1 px-1">
                                  <button data-notify-me="true" name="add" type="submit" class="fw-bold text-nowrap position-relative btn  btn-outline-primary px-lg-6 w-100{% if product.selected_or_first_available_variant.available == false %} p-0 border-0{% endif %}" {% unless product.selected_or_first_available_variant.available -%}disabled="true"{% endunless %}>
                                    {% if product.selected_or_first_available_variant.available %}
                                      <span class="as-loading-icon me-2 position-absolute start-50 translate-middle-x d-none loading-icon">
                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                      </span>
                                    {% endif %}

                                    {%- if product.selected_or_first_available_variant.available -%}
                                      <span class="as-available-info add-to-cart-text">{{ 'products.product.add_to_cart' | t }}</span>
                                    {% else %}
                                      <span class="as-available-info d-none">{{ 'products.product.add_to_cart' | t }}</span>
                                    {% endif %}
                                  </button>
                                </div>
                              {% endunless %}

                              <div class="as-buy-btn-wrap col-6 col-lg-auto px-1 {{ buyNowClass }}">
                                {% if isBuyOnAmazon %}
                                  <div class="additional-checkout-buttons">
                                    <a class="fw-bold btn btn-primary  px-lg-6 w-100" target="_blank" rel="noopener nofollow" href="{{ isBuyOnAmazon }}">{{ 'products.product.buy_on_amazon' | t }}</a>
                                  </div>
                                {% else %}
                                  <div class="additional-checkout-buttons{% unless current_variant.available %} d-none{% endunless %}">
                                    <a data-cart-url="{{ routes.cart_url }}" class="{% unless current_variant.available %}d-none {% endunless %}{% if settings.enable_solid_primary_button %}kiks-btn-primary {% endif %}as-checkout-btn fw-bold btn btn-primary  px-lg-6 w-100"
                                      href="{{ routes.cart_url }}/{{ current_variant.id }}:1">
                                      {% if buy_button_block.settings.button_label != blank %}
                                        {{ buy_button_block.settings.button_label }}
                                      {% else %}
                                        {{ 'products.product.buy_now' | t }}   
                                      {% endif %}
                                    </a>
                                  </div>
                                {% endif %}
                              </div>
                            </div>
                          </div>
                          <div class="as-notify-me-btn-wrap">
                            {%- if product.selected_or_first_available_variant.available -%}
                              {%- assign subscribe_modal_id = '#notify-me' -%}
                              <a data-bs-toggle="modal" data-bs-target="{{ subscribe_modal_id }}" {% unless product.selected_or_first_available_variant.title contains 'Default' %} data-bs-variant-title="{{ product.selected_or_first_available_variant.title }}"{% endunless %} data-bs-product-title="{{ subscribe_tag }}" class="btn btn-primary  as-natify-me-btn d-none col-12 col-lg-auto px-lg-6">{{ 'products.notify_me.notify_me_text' | t }}</a>
                            {% else %}
                              {% unless isBuyOnAmazon %}
                                {%- assign subscribe_modal_id = '#notify-me' -%}
                                <a data-bs-toggle="modal" data-bs-target="{{ subscribe_modal_id }}" {% unless product.selected_or_first_available_variant.title contains 'Default' %} data-bs-variant-title="{{ product.selected_or_first_available_variant.title }}"{% endunless %} data-bs-product-title="{{ subscribe_tag }}" class="btn btn-primary  as-natify-me-btn col-12 col-lg-auto px-lg-6">{{ 'products.notify_me.notify_me_text' | t }}</a>
                              {% else %}
                                <a class="btn btn-primary  as-natify-me-btn col-12 col-lg-auto px-lg-6" target="_blank" rel="noopener nofollow" href="{{ isBuyOnAmazon }}">{{ 'products.product.buy_on_amazon' | t }}</a>
                              {% endunless %}
                            {% endif %} 
                          </div>
                        </div>
                      {% endif %}
                    {%- endform -%}
                  </product-form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </shop-with-us>
      {%- when 'description' -%}
        <div class="richtext-description">{{ product.description }}</div>
      {% when 'prod_total' %}
        <div class="as-total-price-wrap cover_total_price">
          <div class="d-flex flex-wrap align-items-center">
            <span class="title_total">Total Price:</span>
            <span class="as-product-price h3 mb-0" >{{ current_variant.price | money }}</span>
            <s class="text-capitalize as-product-compare-at-price d-none">{{ current_variant.compare_at_price | money }}</s>
            <div class="col-12 col-lg-auto">
              <span class="ms-lg-2 text-danger as-sale-out-text{% if product.selected_or_first_available_variant.available %} d-none{% endif %}">Out of stock</span>
            </div>
          </div>
          {% if product.metafields.custom.shipping_info.value != blank %}
            <div class="pt-1" style="font-size:.875rem;color:#8C8C8C;">{{ product.metafields.custom.shipping_info.value }}</div>
          {% endif %}
        </div>
      {% when 'stock_alert' %}
        {% assign show_stock_alert = block.settings.show_stock_alert %}
        {% if show_stock_alert %}
          <div class="stock_alert_message">
            <p class="stock_alert">{{ block.settings.stock_alert_message }}</p>
          </div>
        {% endif %}
      {%- when 'payment_methods' -%}
         <ul class="ps-0 d-flex flex-wrap mb-3 payment-icons" role="list">
          {%- for type in shop.enabled_payment_types -%}
            <li class="list-inline me-1 mb-1">
              {{ type | payment_type_svg_tag: class: '' }}
            </li>
          {%- endfor -%}
        </ul>
      {%  when 'buy_button' %}
        <div class="buy_button_cover">
          <button class="btn btn-primary button" type="button">
            {% if block.settings.button_label != blank %}
              {{ block.settings.button_label }}
            {% else %}
              {{ 'products.product.buy_now' | t }}   
            {% endif %}
          </button>
        </div>
      {% when 'accessories-selection' %}
        <div class="cover-accessories-selection">
          <div class="accessories-selection as-accessories-selection">
            <div class="summarize">
              <h2 class="headline d-inline-block mb-0">{{ block.settings.headline }}</h2>
              {% if block.settings.description != blank %}
                <span class="fw-bold description px-2">{{ block.settings.description }}</span>
              {% endif %}
              {% if block.settings.enable_need_help %}
                <a
                  class="need-help cursor-pointer d-lg-inline-block d-none"
                  data-bs-toggle="modal"
                  data-bs-target="#needHelpModal"
                >
                  {{- 'sections.accessories_selection.need_help' | t -}}
                </a>
                <a
                  class="need-help cursor-pointer d-lg-none d-lg-inline-block"
                  data-bs-toggle="offcanvas"
                  data-bs-target="#offcanvasBottom"
                  aria-controls="offcanvasBottom"
                >
                  {{- 'sections.accessories_selection.need_help' | t -}}
                </a>
              {% endif %}
            </div>
          {% render 'custom-popup' %}
            <div class="row cover_exprods">
              {% for m_product in block.settings.products %}
                <div class="single_cover col-lg-12 col-xxl-12 col-12">
                  <div
                    class="
                      item-accessories as-item-accessories h-100 border {% if m_product.available == false %} sold-out {% else %} cursor-pointer {% endif %} {% if active_index == forloop.index %} active {% endif %} rounded-2
                      overflow-hidden d-flex position-relative
                    "
                    data-index="{{ forloop.index }}"
                    data-type="required"
                    data-available="{{ m_product.available }}"
                    data-variantid="{{ m_product.selected_or_first_available_variant.id }}"
                    data-price="{{ m_product.price }}"
                    data-compared="{{ m_product.compare_at_price }}"
                  >
                    {% liquid
                      assign image_src = m_product.images[0]
                    %}
                    <div class="product-img flex-shrink-0">
                      <img
                        class="w-100 h-100"
                        src="{{ image_src | img_url: 'master' }}"
                        alt="{{ image_src | escape }}"
                        loading="lazy"
                      >
                    </div>
                    <div class="d-lg-flex flex-grow-1 justify-content-between d-none">
                      <div class="product-msg">
                        <div class="name">{{ m_product.title }}</div>
                        {% if m_product.available == false %}
                          <div class="sold-out-tips fw-bold pt-2">{{ 'products.product.sold_out' | t }}</div>
                        {% endif %}
                        <div class="description">{{ m_product.description }}</div>
                      </div>
                      <div class="price text-end">
                        <div class="price-new text-nowrap">{{ m_product.price | money }}{%- render 'tax-inclusive' target: m_product.selected_or_first_available_variant, tax_class: "text-nowrap" -%}</div>
                        <div class="price-old text-decoration-line-through">{{   m_product.compare_at_price | money }}</div>
                      </div>
                    </div>
                    <div class="d-lg-none d-block cover_content">
                      <div class="product-msg">
                        <div class="name fw-bold">{{ m_product.title }}</div>
                        {% if m_product.available == false %}
                          <div class="sold-out-tips fw-bold pt-2">{{ 'products.product.sold_out' | t }}</div>
                        {% endif %}
                      </div>
                      <div class="price d-flex mt-2 align-items-center">
                        <div class="price-new">{{ m_product.price | money }}</div>
                        {% if m_product.compare_at_price > m_product.price %}
                          <div class="price-old ms-2 text-decoration-line-through">{{ m_product.compare_at_price | money }}</div>
                        {% endif %}
                        {%- render 'tax-inclusive' target: m_product.selected_or_first_available_variant, tax_class: "text-nowrap ms-2" -%}
                      </div>
                      <div class="description mt-2">{{ m_product.description }}</div> 
                    </div>
                    <div class="sign-label position-absolute">
                      <span class="position-absolute" style="top:-5px;">
                        <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M4.5 8.99997L0 4.49997L0.707 3.79297L4.5 7.58547L11.293 0.792969L12 1.49997L4.5 8.99997Z" fill="white"/>
                        </svg>
                      </span>
                    </div>
                  </div>
                </div>
              {% endfor %}
              <div class="no-accesories col-lg-12 col-xxl-12 col-12 mb-2 mb-md-4">
                <div
                  class="
                    item-accessories border h-100 as-item-accessories rounded-2 d-flex align-items-center  
                    cursor-pointer position-relative overflow-hidden {% if active_index == '' %} active {% endif %}
                  "
                  data-type="noRequired"
                  data-money="100"
                >
                  {{ 'sections.accessories_selection.no_accessories_required' | t }}
                  <div class="sign-label position-absolute">
                    <span class="position-absolute" style="top:-5px;">
                      <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.5 8.99997L0 4.49997L0.707 3.79297L4.5 7.58547L11.293 0.792969L12 1.49997L4.5 8.99997Z" fill="white"/>
                      </svg>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      {%- when 'icon-text' -%}
        <div class="cover_icon_text">
          <div class="cover_single">
            <div class="image_icon">
              {% if block.settings.icon_1_svg != blank %}
                <div class="svg_cover">
                  {{ block.settings.icon_1_svg }}
                </div>
              {% else %}
                {% if block.settings.icon_1_image != blank %}
                  <div class="image_cover">
                    <img width="" height="" src="{{ block.settings.icon_1_image | img_url: '48x' }}"/>
                  </div>
                {% endif %}
              {% endif %}
            </div>
            {% if block.settings.icon_1_text != blank %}
              <div class="text_data">
                <p>{{ block.settings.icon_1_text }}</p>
              </div>
            {% endif %}
          </div>
          <div class="cover_single">
            <div class="image_icon">
              {% if block.settings.icon_2_svg != blank %}
                <div class="svg_cover">
                  {{ block.settings.icon_2_svg }}
                </div>
              {% else %}
                {% if block.settings.icon_2_image != blank %}
                  <div class="image_cover">
                    <img width="" height="" src="{{ block.settings.icon_2_image | img_url: '48x' }}"/>
                  </div>
                {% endif %}
              {% endif %}
            </div>
            {% if block.settings.icon_2_text != blank %}
              <div class="text_data">
                <p>{{ block.settings.icon_2_text }}</p>
              </div>
            {% endif %}
          </div>
          <div class="cover_single">
            <div class="image_icon">
              {% if block.settings.icon_3_svg != blank %}
                <div class="svg_cover">
                  {{ block.settings.icon_3_svg }}
                </div>
              {% else %}
                {% if block.settings.icon_3_image != blank %}
                  <div class="image_cover">
                    <img width="" height="" src="{{ block.settings.icon_3_image | img_url: '48x' }}"/>
                  </div>
                {% endif %}
              {% endif %}
            </div>
            {% if block.settings.icon_3_text != blank %}
              <div class="text_data">
                <p>{{ block.settings.icon_3_text }}</p>
              </div>
            {% endif %}
          </div>
        </div>
      {%- when 'show_shipping' -%}        
        {% if block.settings.show_shipping  %}
          {% assign title_ship = block.settings.shipping_tx %}
          {%  assign content_ship = product.metafields.custom.shipping_policy.value %}
          <div class="cover_accordin shipping">
           <div class="accordian_head">
            <span class="title">{{ title_ship }}</span>
           </div> 
           <div class="accordian_content">
            <p>{{ content_ship }}</p>
           </div>
          </div>
        {% endif %}
      {%- when 'show_return' -%}
        {% if block.settings.show_retutn  %}
          {% assign title_return = block.settings.return_tx %}
          {%  assign content_return = product.metafields.custom.return_policy.value %}
          <div class="cover_accordin return">
           <div class="accordian_head">
            <span class="title">{{ title_return }}</span>
           </div> 
           <div class="accordian_content">
            <p>{{ content_return }}</p>
           </div>
          </div>
        {% endif %}
      {%- when 'show_texes' -%}
        {% if block.settings.show_texes  %}
          {% assign title_texes = block.settings.texes_tx %}
          {%  assign content_texes = product.metafields.custom.taxes.value %}
          <div class="cover_accordin texes">
           <div class="accordian_head">
            <span class="title">{{ title_texes }}</span>
           </div> 
           <div class="accordian_content">
            <p>{{ content_texes }}</p>
           </div>
          </div>
        {% endif %}
      {%- when 'share' -%}
        <div class="dropdown mb-3">
          <button class="dropdown-toggle share-btn text-accent" type="button" id="share-button" data-bs-toggle="dropdown" aria-expanded="false">
            {% render 'icon-upload' %}
            <span>{{ 'products.product.share' | t }}</span>
          </button>
          <ul class="dropdown-menu rounded-0 rounded-2 fs-footnote" aria-labelledby="dropdownMenuButton1">
            <li><a rel="noopener nofollow" target="_blank" class="dropdown-item link-secondary py-2 icon-wrap-md" href="https://facebook.com/sharer/sharer.php?u=https://{{ shop.domain }}{{ product.url }}&quote={{ page_description }}">{% render 'icon-social-media', media: 'facebook' %}{{ 'general.social.alt_text.share_on_facebook' | t }}</a></li>
            <li><a rel="noopener nofollow" target="_blank" class="dropdown-item link-secondary py-2 icon-wrap-md" href="https://twitter.com/intent/tweet?url=https://{{ shop.domain }}{{ product.url }}&text={{ page_description }}">{% render 'icon-social-media', media: 'twitter' %}{{ 'general.social.alt_text.share_on_twitter' | t }}</a></li>
            <li><a rel="noopener nofollow" target="_blank" class="dropdown-item link-secondary py-2 icon-wrap-md" href="https://pinterest.com/pin/create/button/?url=https://{{ shop.domain }}{{ product.url }}&media=https:{{ product.featured_image | img_url  }}&description={{ page_description }}">{% render 'icon-social-media', media: 'pinterest' %}{{ 'general.social.alt_text.share_on_pinterest' | t }}</a></li>
          </ul>
        </div>
      {%- when 'pop_up' -%}
        {%- if block.settings.page_block != blank -%}
          <div class="mt-0 fw-bolder text-primary">
            <a
              class="popup-link cursor-pointer d-lg-inline-block d-none"
              data-bs-toggle="modal"
              data-bs-target="#popUpModal"
            >
              {{ block.settings.heading }}
            </a>
            <a
              class="popup-link cursor-pointer d-lg-none d-inline-block"
              data-bs-toggle="offcanvas"
              data-bs-target="#offcanvasPopup"
              aria-controls="offcanvasPopup"
            >
              {{ block.settings.heading }}
            </a>
          </div>
        {%- endif -%}
    {%- endcase -%}
  {% endfor %}
  </div>
</div>
{% comment %} pop_up 弹窗单独拎出来的原因是 父级 有 sticky-top-section, 他限定了 z-index 上线是 1019, 低于蒙层 1050 、.. {% endcomment %}
{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'pop_up' -%}
      <aside class="accessories-selection">
        {% comment %} modal {% endcomment %}
        <div class="modal fade modal-lg" id="popUpModal" tabindex="-1" aria-labelledby="popUpModalLabel" tabindex="-1" aria-hidden="true">
          <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content p-7 position-relative">
              <span class="position-absolute modal-close cursor-pointer" data-bs-dismiss="modal" aria-label="Close">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="24" height="24" fill="white" style="mix-blend-mode:multiply"/>
                  <path d="M12 1.5C6.15 1.5 1.5 6.15 1.5 12C1.5 17.85 6.15 22.5 12 22.5C17.85 22.5 22.5 17.85 22.5 12C22.5 6.15 17.85 1.5 12 1.5ZM16.05 17.25L12 13.2L7.95 17.25L6.75 16.05L10.8 12L6.75 7.95L7.95 6.75L12 10.8L16.05 6.75L17.25 7.95L13.2 12L17.25 16.05L16.05 17.25Z" fill="black" fill-opacity="0.4"/>
                </svg>
              </span>
              <div class="modal-body richtext-description">
                {{ block.settings.page_block.content }}
              </div>
            </div>
          </div>
        </div>
        {% comment %} offcanvas {% endcomment %}
        <div
          class="offcanvas offcanvas-bottom rounded-4 rounded-bottom-left-0 rounded-bottom-right-0"
          tabindex="-1"
          id="offcanvasPopup"
          aria-labelledby="offcanvasPopupLabel"
        >
          <div class="d-flex justify-content-end w-100 position-relative py-4">
            <span class="position-absolute offcanvas-close cursor-pointer" data-bs-dismiss="offcanvas" aria-label="Close">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="24" height="24" fill="white" style="mix-blend-mode:multiply"/>
                <path d="M12 1.5C6.15 1.5 1.5 6.15 1.5 12C1.5 17.85 6.15 22.5 12 22.5C17.85 22.5 22.5 17.85 22.5 12C22.5 6.15 17.85 1.5 12 1.5ZM16.05 17.25L12 13.2L7.95 17.25L6.75 16.05L10.8 12L6.75 7.95L7.95 6.75L12 10.8L16.05 6.75L17.25 7.95L13.2 12L17.25 16.05L16.05 17.25Z" fill="black" fill-opacity="0.4"/>
              </svg>
            </span>
          </div>
          <div class="offcanvas-body">
            {{ block.settings.page_block.content }}
          </div>
        </div>
      </aside>
  {%- endcase -%}
{%- endfor -%}
